<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            border: none;
            list-style: none;
        }
        img{
            vertical-align: top;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #main{
            position: relative;
        }
        .box{
            float: left;
            padding: 15px 0 0 15px;
        }
        .pic{
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;;
        }
        .pic img{
            width: 165px;
        }
    </style>


</head>
<body>
<div id="main">
    <div class="box"><div class="pic"><img src="images/img01.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img02.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img03.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img04.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img05.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img06.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img07.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img08.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img09.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img10.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img11.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img12.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img13.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img14.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img15.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img16.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img17.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img18.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img19.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img20.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img21.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img22.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img23.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img24.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img25.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img26.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img27.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img28.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img29.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img30.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img31.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img32.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img33.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img34.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img35.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img36.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img37.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img38.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img39.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="images/img40.jpg" alt=""></div></div>
</div>
<script src="js/Underscore-min.js"></script>
<script src="js/myFunc.js"></script>
<script>
    window.onload=function () {
        waterFull("main", "box");
        window.onscroll = function () {
            if (checkWillLoadImage) {
                var dataArr = [
                    {"src": "img04.jpg"},
                    {"src": "img06.jpg"},
                    {"src": "img08.jpg"},
                    {"src": "img09.jpg"},
                    {"src": "img10.jpg"},
                    {"src": "img12.jpg"},
                    {"src": "img14.jpg"},
                    {"src": "img16.jpg"},
                    {"src": "img18.jpg"}
                ];
                for(var i=0;i<dataArr.length;i++){
                    var newbox = document.createElement("div");
                    newbox.className="box";
                    document.getElementById("main").appendChild(newbox);

                    var newpic = document.createElement("div");
                    newpic.className="pic";
                    newbox.appendChild(newpic);

                    var newimg = document.createElement("img");
                    newimg.src = "images/"+dataArr[i].src;
                    newpic.appendChild(newimg)
                }
                waterFull("main", "box");
            }
        }
    }
    function waterFull(parent,child) {
        var allboxs = document.getElementById(parent).getElementsByClassName(child);
        var boxWidth = allboxs[0].offsetWidth;
        var screenWidth = document.documentElement.clientWidth;
        var clos = parseInt(screenWidth/boxWidth);
        console.log(clos);
        document.getElementById(parent).style.width = clos*boxWidth+"px";
        document.getElementById(parent).style.margin="0 auto";

        var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
        // 2.2 遍历子盒子
        for (var i = 0; i < allboxs.length; i++) {
            // 2.2.1 求出每一个子盒子的高度
            boxHeight = allboxs[i].offsetHeight;

            // 2.2.2 取出第一行盒子的高度放入高度数组
            if (i < clos) { // 第一行
                heightArr.push(boxHeight);
                // console.log(heightArr)
            } else { // 剩余行
                // 1. 取出最矮的盒子高度
                minBoxHeight = _.min(heightArr);
                // 2. 求出最矮盒子对应的索引
                minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
                // 3. 子盒子定位
                allboxs[i].style.position = "absolute";
                allboxs[i].style.left = minBoxIndex * boxWidth + 'px';
                allboxs[i].style.top = minBoxHeight + 'px';
                // 4. 更新数组中的高度
                heightArr[minBoxIndex] += boxHeight;
            }
        }
    }
    function getMinBoxIndex(arr, val) {
        for(var i=0; i<arr.length; i++){
            if(arr[i] === val){
                return i;
            }
        }
    }
    function checkWillLoadImage() {
        // 1. 获取最后一个盒子
        var allBox = document.getElementsByClassName("box");
        var lastBox = allBox[allBox.length - 1];

        // 2. 求出最后一个盒子自身高度的一半 + offsetTop
        var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

        // 3. 求出屏幕的高度
        var screenW = document.body.clientHeight || document.documentElement.clientHeight;

        // 4. 求出页面偏离浏览器的高度
        var scrollTop = scroll().top;

        return lastBoxDis <= screenW + scrollTop;
    }
</script>
</body>
</html>